/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<u-navbar :is-fixed="true">
			<view class="slot-wrap">
				<view class="search-wrap">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="searchKey" :placeholder="$t('搜索商品')" :show-action="false" height="62"
						@search="searchchGoods()"></u-search>
				</view>

			</view>
		</u-navbar>
		<view class="search-all">
			<view class="search-list">
				<view class="sea-tit">
					<text>{{$t('历史搜索')}}</text>
					<i class="iconfont " :class="[searchAll.length? 'icon_e63a': '']" @click="delect"></i>
				</view>
				<view class="sea-tag">
					<text @click="searchchGoods(item)" v-for="(item,index) in searchAll" :key="index">{{item}}</text>

				</view>
			</view>

		</view>
		<view class="search-all">
			<view class="search-list">
				<view class="sea-tit">
					<text>{{$t('热门搜索')}}</text>
					<!-- <i class="iconfont " :class="[searchAll.length? 'icon_e63a': '']" @click="delect"></i> -->
				</view>
				<view class="sea-tag">
					<text @click="searchchGoods(item)" v-for="(item,index) in hotSearch" :key="index">{{item}}</text>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	let searchList = [] // 所有搜索关键词数组
	export default {
		onLoad(option) {
			this.getHotSearch()
		},
		data() {
			return {
				searchKey: '',
				searchAll: uni.getStorageSync('searchList') ? JSON.parse(uni.getStorageSync('searchList')) : [],
				hotSearch: []
			}
		},
		methods: {
			/**
			 * 搜索店铺，商品和记录搜索历史
			 */
			searchchGoods(value) {
				searchList = []
				if (value) {
					this.searchKey = value
				}
				if (!this.searchKey) {
					this.$toast(this.$t('请输入搜索关键词'))
					return false
				}
				if (uni.getStorageSync('searchList')) {
					searchList = JSON.parse(uni.getStorageSync('searchList'))

					if (!searchList.includes(this.searchKey)) {
						searchList.push(this.searchKey)
					}
				} else {
					searchList.push(this.searchKey)
				}
				uni.setStorageSync('searchList', JSON.stringify(searchList));
				let data = {
					keyword_name: this.searchKey
				}
				this.getnav('/pagesC/search/searchTypeSelection?searchObj=' + JSON.stringify(data))
			},
			/**
			 * 删除搜索记录
			 */
			delect() {
				this.$showModal({
					content: this.$t('确认删除历史记录吗？')
				}).then(res => {
					if (res.confirm) {
						uni.removeStorageSync('searchList');
						this.searchAll = []
					}
				})
			},
			getHotSearch() {
				this.$http.getHotSearch().then(res => {
					this.hotSearch = res.data;
				})
			}
		},
	}
</script>

<style scope lang="scss" scoped>
	.index_class {
		background: #fff;
		height: 100%;
		justify-content: flex-start
	}

	.to-tltle {
		display: flex;
		justify-content: space-between;
		padding-left: 25upx;
	}

	.back {
		color: #FFFFFF;
	}

	.header-filter {
		padding: 0 185upx !important;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
</style>
